<template>
  <div class="box">
    <img src="@/assets/buyLogo.png" style="width: 100%; height: 52px" />
    <!--吸顶_值得买-->
    <van-sticky>
      <div class="top">
        <van-icon name="home-o" size="22" />
        <div class="top_title">值得买</div>
        <div class="right">
          <van-icon name="search" size="27" class="search" />
          <van-icon name="shopping-cart-o" size="25" class="icon" />
        </div>
      </div>
    </van-sticky>
    <!--轮播图导航-->
    <div class="content-top">
      <div class="content-title">
        <img src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" class="u-title" />
        <div class="u-text">严选好物&nbsp;用心生活</div>
        <img src="http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView" class="u-bg" />
      </div>
      <!--轮播图-->
      <div class="white-card">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in navList" :key="item.id" @click="toDeail">
              <img v-lazy="item.picUrl" class="u-topPic" />
              <div class="one-title">{{ item.mainTitle }}</div>
              <div class="two-title">{{ item.viceTitle }}</div>
            </div>
          </div>
          <!-- 如果需要滚动条 -->
          <div class="swiper-scrollbar"></div>
        </div>
      </div>
    </div>
    <!--瀑布流-->
    <div class="waterfall">
      <vue-waterfall-easy ref="waterfall" :imgsArr="waterFallList" srcKey="picUrl" @scrollReachBottom="getData" :maxCols="2">
        <div class="waterfallSlot" slot-scope="props">
          <p class="title">{{ props.value.content }}</p>
          <div class="bottom">
            <div class="left">
              <img v-lazy="props.value.avatar" />
              <p class="title">{{ props.value.title }}</p>
            </div>
            <div class="right">
              <img src=" https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png" alt="" />
              <p class="title">{{ props.value.readCount }}k</p>
            </div>
          </div>
        </div>
        <div slot="waterfall-over">waterfall-over</div>
      </vue-waterfall-easy>
    </div>

    <!--引入组件-->

    <!-- 
  <div class="content-bottom">
  <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData">
 <div class="img-info" slot-scope="props">
    <p class="some-info">第{{props.index+1}}张图片</p>
    <p class="some-info">{{props.value.info}}</p>
  </div>
</vue-waterfall-easy>
</div> -->
    <!-- <van-grid :column-num="2" gutter="10px" class="grid">
        <van-grid-item>
          <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
          <div>CEO推荐</div>
          <div>xxxxxxxx</div>
        </van-grid-item>

        <van-grid-item>
          <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
          <div>CEO推荐</div>
          <div>xxxxxxxx</div>
        </van-grid-item>

        <van-grid-item>
          <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
          <div>CEO推荐</div>
          <div>xxxxxxxx</div>
        </van-grid-item>

        <van-grid-item>
          <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
          <div>CEO推荐</div>
          <div>xxxxxxxx</div>
        </van-grid-item>

        <van-grid-item>
          <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
          <div>CEO推荐</div>
          <div>xxxxxxxx</div>
        </van-grid-item>

        <van-grid-item>
          <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
          <div>CEO推荐</div>
          <div>xxxxxxxx</div>
        </van-grid-item>

        <van-grid-item>
          <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
          <div>CEO推荐</div>
          <div>xxxxxxxx</div>
        </van-grid-item>

        <van-grid-item>
          <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
          <div>CEO推荐</div>
          <div>xxxxxxxx</div>
        </van-grid-item>

        <van-grid-item>
          <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
          <div>CEO推荐</div>
          <div>xxxxxxxx</div>
        </van-grid-item>

        <van-grid-item>
          <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
          <div>CEO推荐</div>
          <div>xxxxxxxx</div>
        </van-grid-item>
      </van-grid> -->
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar, Icon, Sticky, Swipe, SwipeItem, Grid, GridItem } from "vant";
import { Image as VanImage } from "vant";
//引入swiper包
import Swiper from "swiper";
import "swiper/css/swiper.css";
import { mapState } from "vuex";
import { Toast } from "vant";
import vueWaterfallEasy from "vue-waterfall-easy";

Vue.use(Toast);
Vue.use(VanImage);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(NavBar);
Vue.use(Icon);
Vue.use(Sticky);
Vue.use(Swipe);
Vue.use(SwipeItem);

export default {
  name: "Buy",
  components: {
    //局部注册瀑布流组件
    vueWaterfallEasy,
  },

  mounted() {
    //请求数据轮播图
    this.getBuyListPlease();

    //请求数据瀑布流
    this.getWaterFallPlease();
  },
  watch: {
    navList() {
      this.$nextTick(() => {
        //轮播图
        new Swiper(".swiper-container", {
          slidesPerView: 4,
          slidesPerColumn: 2,
          slidesPerColumnFill: "row",
          // 如果需要滚动条
          scrollbar: {
            el: ".swiper-scrollbar",
          },
          //显示两行4列
          grid: {
            fill: "column",
            rows: 2,
          },
        });
      });
    },
  },
  methods: {
    getBuyListPlease() {
      this.$store.dispatch("buy/getBuyList");
    },
    toDeail() {
      Toast("提示内容");
    },
    getWaterFallPlease() {
      this.$store.dispatch("buy/getWaterFall");
    },
    getData() {
      if (this.waterPull.length < 16) {
        this.getWaterFallPlease();
      } else {
        this.$refs.waterfall.waterfallOver();
      }
    },
  },
  computed: {
    ...mapState({
      navList: (state) => state.buy.navList,
      waterFallList: (state) => {
        let list = state.buy.waterFallList.map((item) => {
          return item.look;
        });
        return list;
      },
    }),
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;

  /*吸顶_值得买*/
  .top {
    width: 100%;
    height: 50px;
    padding: 0 14px 0 13px;
    box-sizing: border-box;
    display: flex;
    background: white;
    align-items: center;

    .top_title {
      flex: 1;
      font-size: 19px;
      text-align: center;
      line-height: 55px;
    }

    .right {
      width: 70px;
      height: 55px;

      .search {
        float: left;
        display: block;
        line-height: 55px;
      }

      .icon {
        float: right;
        display: block;
        line-height: 55px;
      }
    }
  }

  /*轮播图导航*/
  .content-top {
    width: 100%;
    height: 258px;
    position: relative;

    .content-title {
      width: 100%;
      position: absolute;

      .u-bg {
        width: 100%;
        height: 270px;
        position: absolute;
        top: 0;
        left: 0;
      }

      .u-title {
        width: 65px;
        height: 34px;
        position: absolute;
        top: 24px;
        left: 0;
        z-index: 2;
      }

      .u-text {
        position: absolute;
        top: 36px;
        left: 68px;
        z-index: 2;
        font-family: PingFangSC-Regular;
        color: #fff;
        font-size: 14px;
      }
    }

    .white-card {
      width: 95%;
      height: 100%;
      position: absolute;
      top: 70px;
      left: 9px;
      z-index: 2;

      .swiper-container {
        width: 100%;
        height: 100%;
        border-radius: 10px;

        .swiper-scrollbar {
          width: 200px;
          margin-left: 100px;
        }

        .swiper-wrapper {
          width: 100%;
          height: 100%;
          background-color: white;

          display: flex;
          flex-wrap: wrap;

          .swiper-slide {
            width: 25%;
            height: 110px;
            text-align: center;
            margin-top: 20px;

            .u-topPic {
              width: 60px;
              height: 60px;
            }

            .one-title {
              font-family: PingFang-SC-Bold;
              font-weight: 700;
              font-size: 15px;
            }

            .two-title {
              font-family: PingFangSC-Regular;
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
  }

  /*瀑布流*/
  .waterfall {
    height: 500px;
    margin-top: 115px;

    .waterfallSlot {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .title {
        font-size: 15px;
        margin-left: 5px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .bottom {
        display: flex;
        justify-content: space-between;

        .left {
          display: flex;
          align-items: center;

          img {
            margin: 5px;
            height: 24px;
            width: 24px;
            border-radius: 50%;
          }

          .title {
            font-size: 12px;
          }
        }

        .right {
          display: flex;
          align-items: center;
          justify-content: flex-end;

          img {
            margin-left: 5px;
            height: 16px;
            width: 16px;
          }

          .title {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
